<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            // 数据准备: [{ name: "体育赛事", value: 11231 },
            // { name: "演出门票", value: 22673 },
            // { name: "唯品会", value: 6123 },
            // { name: "1号店", value: 8989 },
            // { name: "聚美优品", value: 6700 }]
            // 图表类型∶
            // 在series下设置type: pie

            let myEchart = echarts.init(this.$refs.main);
            let pieData = [{ name: "体育赛事", value: 11231 },
            { name: "演出门票", value: 22673 },
            { name: "流行", value: 6123 },
            { name: "音乐节", value: 8989 },
            { name: "其他", value: 6700 }]
            var option = {
                title: {
    text: '购票占比饼图',
    left: 'center',
  },
                series: [
                    {
                        name: '购票',
                        type: 'pie',
                        data: pieData,
                        label: {// 饼图文字显示
                            show: true,// 显示文字
                            formatter: function (arg) {// 决定文字显示的内容
                                return arg.name + '花费了' + arg.value + '元\n' + '占比' + arg.percent + '%'
                            },
                        },
                        // radius: 200, // 设置饼图半径
                        // radius: 20%, // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
                        // radius: ['50%', '75%'], // 第0个元素代表的是内圆的半径第1个元素外圆的半径
                        roseType: 'radius',//南丁格尔图饼图的每一个区域的半径是不同的
                        selectedMode: 'single',//single\multiple  设置鼠标点击后效果 选中的部分会偏离圆心一小段距离
                        selectedOffset: 30,// 设置偏移距离
                    }
                ]
            }
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

